<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>
</head>
<style>
    body{
        display: flex;
        justify-content: center;
    }

    #content{
        left: 50%;
        margin-top: 10%;
        width: 500px;
        height: 300px;
        background-color: chocolate;
        padding: 20px;
        opacity: 80%;
    }

    #btn_guess{
        background-color: black;
        width: 80px;
        height: 30px;
        color: white;
        border-radius: 20px;
        margin-top: 20px;
    }
</style>

<body>
<div id="content">
    <p>请输入你猜的数:</p>
    <input type="text" placeholder="请输入你想猜的数" id="num" value=""><br>
    <input type="button" value="猜一猜" id="btn_guess"><br>
    猜的次数:<span id="count">0</span>次
    <p id="res"></p>
</div>
</body>
<script>
    let arr = [];

    document.getElementById("btn_guess").onclick = function (){
        guess();
    }

    function guess(){
        let num = document.getElementById("num").value;//获取猜的数字
        document.getElementById("count").innerText =  Number(document.getElementById("count").innerText)+1; //次数
        for(let i = 0;i<arr.length;i++){
            if(Number(num) === arr[i]){
                document.getElementById("res").innerHTML = "恭喜你，输入的数字存在生成的数组中！<br>数组为:"+arr.toString()+"下标为:"+i;
                createRandomArray(10); //重新生成10个数
                return;
            }
        }
        document.getElementById("res").innerText = "对不起，输入的数字不存在生成的数组中。";
    }

    setInterval("changeBack()",1000);
    function changeBack(){
        //使用随机RGB变换背景颜色
        let r = Math.floor(Math.random()*256)-1;
        let g = Math.floor(Math.random()*256)-1;
        let b = Math.floor(Math.random()*256)-1;
        document.getElementById("content").setAttribute("style","background-color:rgb("+r+","+g+","+b+")");
    }

    createRandomArray(10);//生成10个随机数组
    function createRandomArray(num){
        arr = [];
        for(let i = 0;i<num;i++){
            arr.push(Math.ceil(Math.random()*100));
        }
        console.log(arr);
    }


</script>
</html>